<template>
    <view
        style="width:100rpx; height:100vh; backgroundColor:#005ff0; background:'https://gd-hbimg.huaban.com/e36f82282235cc7d0486fd6dfe24acc23304565e17e19f-RZPuN8_fw1200webp'"
        class="bk">
        <text class="view-base"
            style=" flex: 1 0.2 auto; max-height:40rpx; flex-direction:row; color:#ffffff; backgroundColor:#ff00f0; background:'https://img0.baidu.com/it/u=3217812679,2585737758&fm=253&fmt=auto&app=138&f=JPEG">{{
                title }}</text>
        <text
            style="margin: 1rpx 8px; flex: 1 0.1 auto; max-height: 10rpx; flex-direction:row; backgroundColor:#0f5ff0; color:#ffffff; border-radius: 1rpx 15rpx 15rpx 1rpx;"
            class="view-base" @click="handleClick">{{ message }}</text>

        <!-- <image style="margin: 1rpx 8px; flex: 1 0.1 auto; max-height:40rpx; border-radius:1rpx 5rpx 1rpx 5rpx;"
            src="https://5b0988e595225.cdn.sohucs.com/images/20180206/008b555c043849449918334a590151bd.gif">
        </image> -->
        
        <view v-if="showImage"
            style="margin: 1rpx 1rpx 1rpx 1rpx; flex: 1 1 auto; max-height:40rpx; flex-direction:row; align-items:center; justify-content:space-around; background:'https://img1.baidu.com/it/u=2440466707,2031116846&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=366';">
            <image style="width:25rpx;height:25rpx;  border-radius:15rpx;"
                src="https://gd-hbimg.huaban.com/74fb019784ceba4c3078658ddf6e111728add8b3619533-uV44TX_fw658">
            </image>
            <image style="width:30rpx;height:30rpx; border-radius:15rpx;"
                src="https://hbimg.huaban.com/84f96a171d50bd810216889849352f6d269e490318493-U2ta7c_fw658">
            </image>
        </view>

        <view
            style="margin: 1rpx 1rpx 1rpx 1rpx; flex: 1 1 auto; max-height:40rpx; flex-direction:row; align-items:center; justify-content:space-around; background:'https://img1.baidu.com/it/u=2440466707,2031116846&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=366';">
            <image style="width:20rpx;height:20rpx; border-radius:3rpx;"
                src="https://pic1.imgdb.cn/item/65a75bef871b83018a848c5d.png">
            </image>
        </view>

        <image style="margin: 1rpx 8px; flex: 1 0.1 auto; max-height:40rpx; border-radius:1rpx 5rpx 1rpx 5rpx;"
            src="https://img1.baidu.com/it/u=3241414156,548742647&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=235">
        </image>
        <image style="margin: 1rpx 8px; flex: 1 0.1 auto; max-height:40rpx; border-radius:1rpx 5rpx 1rpx 5rpx;"
            src="https://img2.baidu.com/it/u=1114542846,256035742&fm=253&fmt=auto&app=138&f=PNG?w=658&h=323">
        </image>

    </view>
</template>
<script>

export default {
    name: 'App',

    // 数据属性
    data() {
        return {
            title: '自定义渲染器',
            count: 0,
            message: '欢迎点击我',
            showImage: true
        }
    },

    // 生命周期钩子
    created() {
        console.log('1. created - 组件实例已创建')
        this.message = '组件已创建'
    },

    mounted() {
        console.log('2. mounted - DOM已挂载')
        this.message = '组件已挂载'
    },

    updated() {
        console.log('3. updated - 组件已更新')
    },

    beforeUnmount() {
        console.log('4. beforeUnmount - 组件即将卸载')
    },

    // 方法
    methods: {
        handleClick() {
            this.count++;
            this.showImage = this.showImage ? false : true;
            console.log(`点击次数：${this.count}`);
            this.message = `已点击 ${this.count} 次`;
        }
    }
}
</script>

<style lang="css">
.view-base {
    background: "https://pic1.imgdb.cn/item/65a75bef871b83018a848c5d.png";
}

.bk {
    background: "https://pic1.imgdb.cn/item/65a75bef871b83018a848c5d.png";
}
</style>